<template>
  <div class="flex items-start">
    <img
      :src="comment.avatar"
      :alt="comment.nickname"
      class="w-10 h-10 rounded-full mr-3"
    />
    <div class="flex-1">
      <div class="flex items-center mb-1">
        <span class="font-medium text-gray-900 dark:text-white">{{ comment.nickname }}</span>
        <span class="mx-2 text-gray-400">•</span>
        <span class="text-sm text-gray-500 dark:text-gray-400">{{ formatDate(comment.createTime) }}</span>
      </div>
      <div class="flex justify-between items-center">
        <p class="text-gray-700 dark:text-gray-300 mb-2">{{ comment.content }}</p>
        <button
          @click="handleReply"
          class="text-sm  ml-4 whitespace-nowrap p-2 rounded-full bg-blue-500 flex items-center justify-center dark:bg-blue-600"
        >
     <svg t="1758783845194" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2503" width="24" height="24"><path d="M704 810.666667H160V374.933333C160 274.133333 236.586667 192 330.666667 192h373.333333c94.08 0 170.666667 82.133333 170.666667 182.933333v252.8C874.666667 728.533333 798.08 810.666667 704 810.666667z m-522.666667-21.333334h522.666667c82.346667 0 149.333333-72.533333 149.333333-161.6v-252.8C853.333333 285.866667 786.346667 213.333333 704 213.333333H330.666667c-82.346667 0-149.333333 72.533333-149.333334 161.6z" fill="#ffffff" p-id="2504" data-spm-anchor-id="a313x.search_index.0.i5.1f5a3a81r9LkYk" class=""></path><path d="M522.666667 501.333333m-42.666667 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z" fill="#ffffff" p-id="2505" data-spm-anchor-id="a313x.search_index.0.i2.1f5a3a81r9LkYk" class=""></path><path d="M352 501.333333m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z" fill="#ffffff" p-id="2506" data-spm-anchor-id="a313x.search_index.0.i3.1f5a3a81r9LkYk" class=""></path><path d="M693.333333 501.333333m-42.666666 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z" fill="#ffffff" p-id="2507" data-spm-anchor-id="a313x.search_index.0.i4.1f5a3a81r9LkYk" class=""></path></svg>
        </button>
      </div>

      <!-- 回复评论的输入框 -->
      <div v-if="replyForm.parentId === comment.id" class="mt-4  rounded-lg p-3">
        <textarea
          v-model="replyForm.content"
          placeholder="请输入回复内容..."
          class="w-full px-3 py-2 text-gray-700 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-600 dark:border-gray-500 dark:text-white"
          rows="3"
        ></textarea>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3 mb-3">
          <div>
            <input
              v-model="replyForm.nickname"
              type="text"
              placeholder="昵称（必填）"
              class="w-full px-3 py-2 text-gray-700 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-600 dark:border-gray-500 dark:text-white"
            />
          </div>
        </div>
        <div class="flex justify-end space-x-2">
          <button
            @click="cancelReply"
            class="px-3 py-1 text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100"
          >
            取消
          </button>
          <button
            @click="submitReply"
            :disabled="submitting"
            class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
          >
            {{ submitting ? '提交中...' : '回复' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  comment: {
    type: Object,
    required: true
  },
  replyForm: {
    type: Object,
    required: true
  },
  submitting: {
    type: Boolean,
    required: true
  }
})

const emit = defineEmits(['replyToComment', 'submitReply', 'cancelReply'])

// 处理回复操作
const handleReply = () => {
  emit('replyToComment', props.comment)
}

// 提交回复
const submitReply = () => {
  emit('submitReply')
}

// 取消回复
const cancelReply = () => {
  emit('cancelReply')
}

// 格式化时间
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>

<style scoped>
</style>